<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>操作监控页面</title>
		<link rel="stylesheet" href="__STATIC__/css/bootstrap.min.css" />
		<link rel="stylesheet" href="__STATIC__/css/header.css" />
		<script src="__STATIC__/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="__STATIC__/js/bootstrap.min.js"  type="text/javascript" charset="utf-8"></script>
		<script src="__STATIC__/js/metisMenu.min.js" type="text/javascript" charset="UTF-8"></script>
	<!--获取时间-->
	<script language=JavaScript>
			function tick() {
			var years,months,days,hours, minutes, seconds;
			var intYears,intMonths,intDays,intHours, intMinutes, intSeconds;
			var today;
			today = new Date(); //系统当前时间
			intYears = today.getFullYear(); //得到年份,getFullYear()比getYear()更普适
			intMonths = today.getMonth() + 1; //得到月份，要加1
			intDays = today.getDate(); //得到日期
			intHours = today.getHours(); //得到小时
			intMinutes = today.getMinutes(); //得到分钟
			intSeconds = today.getSeconds(); //得到秒钟
			years = intYears + "-";

			if(intMonths < 10 ){
			months = "0" + intMonths +"-";
			} else {
			months = intMonths +"-";
			}
			if(intDays < 10 ){
			days = "0" + intDays +" ";
			} else {
			days = intDays + " ";
			}
			if (intHours == 0) {
			hours = "00:";
			} else if (intHours < 10) {
			hours = "0" + intHours+":";
			} else {
			hours = intHours + ":";
			}
			if (intMinutes < 10) {
			minutes = "0"+intMinutes+"";
			} else {
			minutes = intMinutes+"";
			}
			if (intSeconds < 10) {
			seconds = "0"+intSeconds+" ";
			} else {
			seconds = intSeconds+" ";
			}
			timeString = years+months+days+hours+minutes;
			Clock.innerHTML = timeString;
			window.setTimeout("tick();", 1000);
			}
			window.onload = tick;
			</script>
			<!--获取地址-->
			<script language="JavaScript">
				function getLocation(){
							if (navigator.geolocation){
    							navigator.geolocation.getCurrentPosition(showPosition,showError);
    							dress.innerHTML=navigator;
  									}else{
    				alert("浏览器不支持地理定位。");
							  }
							}
			</script>
	<style type="text/css">
		.container{
					width: 60%;
					height: 100%;
					top: 25%;
					position: fixed;
					size: a3;
					}
		.col-md-9{
			width: 100%;
			height: 100%;
			top:5%;
			left: 24%;
			right: 100%;
			position: absolute;
		}
	</style>
	</head>
	<body>
	<div class="header">     <div class="header-logo-bar">         <div class="header-logo-msg">             <!--<div class="logo">              </div>             <div class="logo">              </div>-->         </div>         <div class="header-personal-message">             <span><a href="#"></a></span>             <span><a href="#"></a></span>             <div class="profile-photo">              </div>         </div>     </div>     <div class="nav-bar">         <ul class="nav">             <a href="{:url('index/index/home')}">首页</a>         </ul>         <ul>             <a href="#">前端</a>             <ul class="plat">                 <li><a href="{:url('index/index/course')}">HTML</a></li>                 <li><a href="#">CSS</a></li>                 <li><a href="#">Javascript</a></li>             </ul>         </ul>         <ul>             <a href="#">后端</a>             <ul class="plat">                 <li><a href="#">Java</a></li>                 <li><a href="#">c++</a></li>                 <li><a href="#">PHP</a></li>                 <li><a href="#">python</a></li>             </ul>         </ul>         <ul>             <a href="#">移动</a>             <ul class="plat">                 <li><a href="#">ios</a></li>                 <li><a href="#">Android</a></li>             </ul>         </ul>         <ul>             <a href="#">数据库</a>             <ul class="plat">                 <li><a href="#">MySQL</a></li>                 <li><a href="#">SQLServer</a></li>                 <li><a href="#">Oracle</a></li>             </ul>         </ul>     </div> </div> <div class="personal-msg">     <div class="personal-msg-bar">         <div class="personal-msg-profile-photo"></div>         <div class="personal-msg-username"><span>username</span></div>     </div>     <div class="personal-msg-order">         <div class="personal-msg-btn"><a href="#">我的课程</a></div>         <div class="personal-msg-btn"><a href="#">个人信息</a></div>     </div>     <div class="personal-msg-order">         <div class="personal-msg-btn"><a href="#">最近浏览</a></div>         <div class="personal-msg-btn"><a href="#">我的设置</a></div>     </div> </div>
	<div id="content-container" class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="sidenav">
                    <ul class="list-group">
                        <h2>设置</h2>
                      <li class="list-group-item ">
                        <a href="personal.html">个人信息</a>
                    </li>
                    <li class="list-group-item">
                        <a href="settings.html#news">修改信息</a>
                    </li>
                        <!--<li class="list-group-item ">-->
                            <!--<a href="caozuojiankong.html">操作记录</a>-->
                        <!--</li>-->
                        <li class="list-group-item ">
                            <a href="#tuichu"class="header-nav-item"  data-toggle="modal" onclick="login();"  style="margin-right:0px;font-size:14px;">退出登录</a>
                        </li>
                    </ul>
                </div>
            </div>

		<div class="col-md-9">

                <div id="news" class="panel">
                    <div class="panel-heading"><h4>操作记录</h4>
                    	 <div class="common-title">
        <span class="title-tips">通过查看操作类型、登录时间、登录地点和设备可以判断账号是否正常</span>
        <nav class="header-nav" style="float:right">
					<a href="#myModal" class="header-nav-item"  data-toggle="modal" onclick="login();"  style="margin-right:0px;font-size:14px;">不是我登录的？</a>
				</nav>
    </div>
                    </div>
                    <div class="panel-body">

                        <form id="user-profile-form" class="form-horizontal" method="post" novalidate="novalidate" data-widget-cid="widget-1">
                            <div class="page-settings">
							    <div class="line"></div>
							    <div class="setting">
							        <div class="contentBox">
							            <table class="table">
							                <tbody><tr>
							                    <th>类型        </th>
							                    <th>登录时间      </th>
							                    <th>城市              </th>
							                    <th>IP         </th>
							                    <th>登录设备</th>
							                		</tr>
							                		 <tr>
								                    <td>账号登录</td>
								                    <td><span id="Clock"></span></td>
								                    <td>广东省广州市从化市</td>
								                    <td><span id="ip">172.16.154.69</span></td>
								                    <td>web</td>
								                </tr>
							                </tbody>
							            </table>
							        </div>
							    </div>
							</div>
                    </div>
            	</div>
            </div>
            </div>
            </div>
            <script type="text/javascript">
			function login(){
				$('#loginTitle').css('color','#337Ab7');
				$('#loginForm').show();
			}
			</script>


           <!--不是我登录的-->
           <div class="modal fade" id="myModal" tabindex="-1" role="dialog"  style="position:fixed; top:30%;">
		    <div class="modal-dialog" role="document">
		        <div class="modal-content">
		        <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		                    <span aria-hidden="true" style="font-size:18px;">×</span>
		                </button>
		                <h4>修改密码</h4>
		            </div>

		            <div class="modal-body">
		               	<form id="loginForm" class="form-horizontal" style="padding: 0px 20px;">
		                      <div class="form-group">
		                          <input type="email" class="form-control"  id="username"  placeholder="原始密码">
		                      </div>
		                      <div class="form-group help">
		                          <input type="password" class="form-control"  id="password"  placeholder="输入新密码">
		                      </div>
		                      <div class="form-group">
		                      	<input type="password" class="form-control" id="repasswprd" placeholder="确认新密码" />
		                      </div>
		                      <div class="form-group">
		                      	<button>确认</button>
		                      	<button>取消</button>
		                      	<a href="#">
		                      		找回密码
		                      	</a>
		                      </div>
		                  </form>

		            </div>

		        </div>
		    </div>
		</div>
	<script type="text/javascript">
        $(document).ready(function(){
            $("div.profile-photo").mouseenter(function(){
                $("div.personal-msg").show(500);
            });
            $("div.personal-msg").mouseleave(function(){
                $("div.personal-msg").hide(500);
            });
            $("div.nav-bar").mouseenter(function(){
                $("div.personal-msg").hide(500);
            });
        });
	</script>
	</body>

</html>
